<?php
use common\service\StaticService;
use backend\assets\AdminAsset;
use common\service\GlobalUrlService;

StaticService::includeAppJsStatic(GlobalUrlService::buildStaticUrl('/backend/menu/add-mune.js'),AdminAsset::class);
$nbsp = [
    1 =>'&nbsp;',
    2 =>'&nbsp;&nbsp;&nbsp;&nbsp;',
    3 =>'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
    4 =>'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
];
?>

<div class="layui-card">
    <div class="layui-card-header">添加菜单</div>
    <div class="layui-card-body">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-inline">
                <input type="text" class="layui-input menu-name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">URL</label>
            <div class="layui-inline">
                <input type="text" class="layui-input menu-addr">
            </div>
        </div>
        <div class="layui-form-item layui-form">
            <label class="layui-form-label">父级</label>
            <div class="layui-inline">
                <select class="select">
                    <option value="0">└顶级菜单</option>
                    <?php foreach ($menus as $val):?>
                        <option value="<?=$val['menu_id']?>"><?php echo $nbsp[$val['level']] ?>└<?=$val['menu_name']?></option>
                    <?php endforeach;?>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form">
            <label class="layui-form-label">操作</label>
            <div class="layui-inline">
                <input type="radio" name="operation"  value="查看" title="查看">
            </div>
            <div class="layui-inline">
                <input type="radio" name="operation"  value="新增" title="新增">
            </div>
            <div class="layui-inline">
                <input type="radio" name="operation"  value="修改" title="修改">
            </div>
            <div class="layui-inline">
                <input type="radio" name="operation"  value="删除" title="删除">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图标</label>
            <div class="layui-inline" style="width:40px;height:40px;line-height:40px;text-align:center;border:1px solid #ccc;">
                <a class="choosed-pic">
                    <i class="layui-icon show-icon"></i>
                </a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-sm append"><i class="layui-icon">&#xe654;</i></a>
            </div>            
        </div>
        <div class="layui-form-item layui-form">
            <label class="layui-form-label">显示</label>
            <div class="layui-inline">
                <div class="layui-inline">
                    <input type="radio" name="isshow"  value="1" title="显示">
                </div>
                <div class="layui-inline">
                    <input type="radio" name="isshow"  value="0" title="隐藏">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <a class="layui-btn appendMenu">确认</a> 
            <a class="layui-btn layui-btn-primary" onclick="window.history.go(-1);">取消</a>
        </div>
    </div>
</div>

<div class="filter" style="display:none;">
    <ul class="layui-form-item">
        <li class="layui-inline"><i class="layui-icon">&#xe672;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe66b;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe668;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe6b1;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe702;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe66e;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe68e;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe674;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe669;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe666;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe66c;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe66a;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe667;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe7ae;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe665;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe664;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe716;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe656;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe653;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe663;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe6c6;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe6c5;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe662;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe661;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe660;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe65d;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe65f;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe671;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe65e;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe659;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe735;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe756;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe65c;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe715;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe705;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe6b2;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe6af;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe69c;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe698;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe657;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe65b;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe65a;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe681;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe67c;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe601;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe857;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe655;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe770;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe670;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe63d;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe63e;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe654;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe652;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe651;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe6fc;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe6ed;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe645;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe64f;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe64e;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe64b;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe62b;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe64d;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe64a;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe64c;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe650;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe649;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe648;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe647;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe646;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe644;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe62a;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe643;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe63f;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe642;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe641;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe640;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe63c;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe63b;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe63a;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe639;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe638;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe637;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe636;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe635;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe634;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe633;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe632;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe631;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe630;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe62f;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe62e;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe62d;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe62c;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe629;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe628;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe625;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe623;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe621;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe620;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe61f;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe61c;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe60b;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe619;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe61a;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe603;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe602;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe617;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe615;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe614;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe613;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe612;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe611;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe60f;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe60e;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe60d;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe60c;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe60a;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe609;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe605;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe607;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe606;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe604;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe600;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe658;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#x1007;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#x1006;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#x1005;</i></li>
        <li class="layui-inline"><i class="layui-icon">&#xe608;</i></li>
    </ul>
</div>


<style>
.layui-form-label{margin-right:75px;}
.filter{max-height:400px;overflow:auto;}
.filter ul{width:380px;padding:5px 10px;box-sizing:border-box;}
.filter ul li{width:75px;height:30px;line-height:30px;border:1px solid #ccc;text-align:center;vertical-align:middle;}
.activeli{background: #009688;color:#fff;}
</style>